<template>
  <div class="clue-table-container">
    <el-table
      :data="props.listData"
      class="custom-table"
      border
      :header-cell-style="{ background: '#f5f7fa', color: '#303133' }"
    >
      <el-table-column prop="name" label="字段名称" :min-width="120" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="fieldName" label="字段属性名称" :min-width="140" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="fieldType" label="字段类型" :min-width="100" show-overflow-tooltip>
      </el-table-column>

      <el-table-column prop="moduleIsPublic" label="模块是否通用" :min-width="120" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.moduleIsPublic == 2 ? 'success' : 'danger'" class="status-tag">
            {{ scope.row.moduleIsPublic == 2 ? '通用' : '未通用' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isShow" label="列表显示" :min-width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isShow == 1 ? 'success' : 'danger'" class="status-tag">
            {{ scope.row.isShow == 1 ? '显示' : '不显示' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isRequired" label="是否必填" :min-width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isRequired == 1 ? 'success' : 'danger'" class="status-tag">
            {{ scope.row.isRequired == 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="isSearch" label="是否查询" :min-width="100" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.isSearch == 1 ? 'success' : 'danger'" class="status-tag">
            {{ scope.row.isSearch == 1 ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="description" label="字段描述" show-overflow-tooltip :min-width="150">
      </el-table-column>

      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :min-width="160"
        :formatter="dateFormatter"
        show-overflow-tooltip
      />

      <el-table-column label="操作" align="center" :min-width="140" fixed="right">
        <template #default="scope">
          <div class="action-buttons">
            <el-button
              type="primary"
              @click="updateField(scope.row)"
              link
              class="action-btn edit-btn"
              size="small"
            >
              <Icon icon="ep:edit" class="action-icon" />
              编辑
            </el-button>
            <el-button
              type="danger"
              @click="delFiled(scope.row.id)"
              link
              class="action-btn delete-btn"
              size="small"
            >
              <Icon icon="ep:delete" class="action-icon" />
              删除
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { dateFormatter, formatDate } from '@/utils/formatTime'
import * as customFieldApi from '@/api/crm/module/index.ts'
const { t } = useI18n() // 国际化

const props = defineProps({
  listData: {
    type: Array
  }
})
const emit = defineEmits(['edit', 'success'])
const updateField = (item) => {
  emit('edit', item)
}
const delFiled = (id) => {
  ElMessageBox.confirm('确定要删除当前数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await customFieldApi.customFieldHeadDelete(id)
      ElMessage.success(t('common.delSuccess'))
      emit('success')
    })
    .catch(() => {})
}
</script>

<style scoped>
.clue-table-container {
  width: 100%;
  overflow: auto;
}

/* 自定义表格样式 */
.custom-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.custom-table :deep(.el-table__header) {
  background: #f5f7fa;
}

.custom-table :deep(.el-table__header th) {
  background: #f5f7fa;
  border-bottom: 2px solid #0052cc;
  color: #303133;
  font-weight: 600;
  padding: 12px 0;
}

.custom-table :deep(.el-table__body tr:hover > td) {
  background-color: #f0f7ff;
}

.custom-table :deep(.el-table__row--striped td) {
  background: #fafbfc;
}

.custom-table :deep(.el-table__body td) {
  padding: 12px 0;
}

.custom-table :deep(.el-table__border) {
  border-color: #e4e7ed;
}

/* 状态标签样式 */
.status-tag {
  font-weight: 500;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
}

.status-tag.el-tag--success {
  background-color: #f0f9ff;
  border-color: #0052cc;
  color: #0052cc;
}

.status-tag.el-tag--danger {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-btn {
  color: #0052cc;
}

.edit-btn:hover {
  background: rgba(0, 82, 204, 0.1);
  transform: translateY(-1px);
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  background: rgba(245, 108, 108, 0.1);
  transform: translateY(-1px);
}

.action-icon {
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .clue-table-container {
    overflow-x: auto;
  }

  .custom-table {
    min-width: 1000px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }

  .custom-table :deep(.el-table__header th) {
    padding: 10px 0;
    font-size: 13px;
  }

  .custom-table :deep(.el-table__body td) {
    padding: 10px 0;
    font-size: 13px;
  }

  .status-tag {
    font-size: 11px;
    padding: 3px 6px;
  }
}

@media (max-width: 480px) {
  .custom-table {
    min-width: 1200px;
  }

  .custom-table :deep(.el-table__header th) {
    padding: 8px 0;
    font-size: 12px;
  }

  .custom-table :deep(.el-table__body td) {
    padding: 8px 0;
    font-size: 12px;
  }

  .action-btn {
    font-size: 12px;
    padding: 3px 6px;
  }
}

/* 滚动条美化 */
.clue-table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.clue-table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.clue-table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.clue-table-container::-webkit-scrollbar-thumb:hover {
  background: #0052cc;
}

/* 动画效果 */
.custom-table {
  transition: all 0.3s ease;
}

.action-btn {
  transition: all 0.3s ease;
}

/* 主题色变量 */
:root {
  --primary-color: #0052cc;
  --primary-hover: #003d99;
  --primary-light: #f0f7ff;
  --border-color: #e4e7ed;
  --text-color: #303133;
  --bg-color: #f8f9fa;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-table .el-table__cell) {
  border-color: #e4e7ed;
}

:deep(.el-table--border .el-table__inner-wrapper::after) {
  background-color: #e4e7ed;
}

:deep(.el-table--border::before) {
  background-color: #e4e7ed;
}

:deep(.el-table--border::after) {
  background-color: #e4e7ed;
}
</style>
